import React, { Component } from 'react';
import { Icon } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import globalStyles from '../../style/common.less';

const modalRoot = document.getElementById('dialog-root');

class InfoPanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('info_panel');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  render() {
    const {
      style,
      height,
    } = this.props;
    return (
      <div
        style={{
          ...style,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
          zIndex: 999,
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          {' '}
          <div style={{ float: 'left', marginLeft: 6,fontSize:15}}><div style={{float: 'left',width:5,height:35,marginRight: 10,backgroundColor: 'rgba(63,177,277,1)'}}/>生态廊道</div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <Scrollbars style={{ height: height - 41 }}>
            <div dangerouslySetInnerHTML={{ __html: '<p><span style="font-size: 18px;"></span></p><p style="white-space: normal;font-size: 16px;">建设长江生态廊道、淮河-洪泽湖生态廊道。<br/></p><p style="line-height:150%;font-size: 16px;">加快构建江淮丘陵、大别山、黄山-天目山-武夷山、四明山-雁荡山，共筑皖西大别山生态屏障和皖南-浙西-浙南生态屏障。</p><p style="line-height:150%;font-size: 16px;">加快上海、合肥、金华等城市生态廊道项目建设，推动城市群内外生态建设联动。</p>' }} />
          </Scrollbars>
        </div>
      </div>
    );
  }
}

export default InfoPanel;
